<template>
  <div class="swipe" @click="showDrawer" :style="view?'border: none !important;':'cursor: pointer;'">
    <van-swipe class="my-swipe" 
    :autoplay="props.autoplay" 
    :indicator-color="props.indicatorColor" 
    :height="props.height" 
    :loop="props.loop" 
    :show-indicators="props.showIndicators">
      <van-swipe-item class="pic" v-for="(item,index) in props.pic" :key="index" v-show="props.pic.length > 0">
        <img v-lazy="item.response" />
      </van-swipe-item>
      <van-swipe-item class="noPic" v-if="props.pic.length == 0">
        <img src="@/static/images/noPic.png" />
      </van-swipe-item>
    </van-swipe>
    <drawer :attr="list.attr" :show.sync="show" @change="editAttr" :index="list.index" />
  </div>
</template>

<script>
import drawer from "../drawer"
import changeAttr from '@/utils/changeAttr.js'
import changeViewAttr from '@/utils/changeViewAttr.js'

export default {
  components:{
    drawer
  },
  name:"swipe",
  props:{
    list:{
      type:Object,
    },
    view:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      show:false,
      props:{},
      changeAttr,
    }
  },
  created() {
    this.editAttr()
  },
  methods: {
    showDrawer(){
      if(!this.view){
        this.show = true
      }
    },
    editAttr(){
      if(this.view){
        this.props = changeViewAttr(this.list.attr,this.list.index)
      }else{
        this.props = changeAttr(this.list.attr,this.list.index)
      }
    }
  },
}
</script>

<style scoped>
  .swipe{
    box-sizing: border-box;
    border: 1px dashed transparent;
  }
  .swipe:hover{
    border: 1px dashed #1989fa;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  }
  .noPic img{
    width: 150px;
    height: 120px;
  }
</style>